	<template>
		<view>
			<!-- 头部用户信息栏 -->
			<view style="" class="head">
				<u-avatar :src="src" shape="circle" size="50" @click="showuser()"></u-avatar>
				<view class="head_user">{{username}}</view>
			</view>
			<!-- 宫格布局内容 -->
			<view class="body1">
				<text class="body1_zi">{{$t('withus.userservice')}}</text>
				<u-grid :border="false" @click="click">
					<u-grid-item>
						<u-icon :customStyle="{paddingTop:20+'rpx'}" name="account" :size="22"></u-icon>
						<text class="grid-text">{{$t('withus.user')}}</text>
					</u-grid-item>
					<u-grid-item>
						<u-icon :customStyle="{paddingTop:20+'rpx'}" name="lock-opened-fill" :size="22"></u-icon>
						<text class="grid-text">{{$t('withus.repwd')}}</text>
					</u-grid-item>
					<u-grid-item>
						<u-icon :customStyle="{paddingTop:20+'rpx'}" name="setting" :size="22"></u-icon>
						<text class="grid-text">{{$t('withus.set')}}</text>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>
			<view class="u-page">
				<u-list style="height: 100%;">
					<u-list-item v-for="(item, index) in indexList" :key="index">
						<u-cell :title="item.title" @click="xianshi(item.href)">
							<u-avatar slot="icon" shape="square" size="30" :src="item.url"
								customStyle="margin: -3px 5px -3px 0"></u-avatar>
						</u-cell>
						<!-- <text>1234</text> -->
					</u-list-item>
				</u-list>
			</view>
		</view>
	</template>

	<script>
		import circleProgress from '../../uni_modules/uview-ui/libs/config/props/circleProgress'
		export default {
			data() {
				return {
					src: "../../static/2.png",
					username:'',
					indexList: []
				}
			},
			onShow(){
				this.indexList = [{
							url: '../../static/icon/personal-center.png',
							title: this.$t('withus.geren'),
							href: './userdesc'
						},
						{
							url: '../../static/icon/zeqh.png',
							title: this.$t('test.lang'),
							href: '../api/langchange'
						}, {
							url: '../../static/icon/youjianzd.png',
							title: this.$t('withus.MailBill'),
							href:'./mailBill'
						}, {
							url: '../../static/icon/tuichu.png',
							title: this.$t('withus.leave'),
							href: 'tuichu'
						}
					]
			},
			onLoad() {
				this.username = uni.getStorageSync("username");
			},
			methods: {
				click(name) {
					// this.$refs.uToast.success(`点击了第${name}个`)
					if (name == 0) {
						uni.navigateTo({
							url: "./user"
						})
					} else if (name == 1) {
						uni.navigateTo({
							url: "./repwd"
						})
					}
				},
				// 上传头像
				showuser() {
					uni.chooseImage({
						count: 1,
						success: res => {
							console.log(res.tempFilePaths);
							this.src = res.tempFilePaths[0]
						}
					})
				},
				scrolltolower() {
					console.log(1);
				},
				xianshi(i) {
					if (i == "tuichu") {
						uni.setStorageSync('token', "");
						uni.reLaunch({
							url: '../index/test'
						})
					} else {
						uni.navigateTo({
							url: i
						})
					}
				}
			}
		}
	</script>

	<style>
		page {
			background-image: linear-gradient(to bottom, #016fb6, #e1f3ff);
			/* height: 100vh; */
			height: 100%;
		}

		.head {
			display: flex;
			height: 70px;
			padding-top: 40px;
			padding-left: 20px;
		}

		.head_user {
			line-height: 50px;
			padding-left: 10px;
			color: white;
			font-size: 20px;
			font-weight: 600;
		}

		.body1 {
			background-color: white;
			border-radius: 5px;
			width: 90%;
			margin: auto;
		}

		.body1_zi {
			padding-left: 10px;
			line-height: 30px;
			font-weight: bold;
			font-size: 16px;
			color: #014099;

		}

		.grid-text {
			font-size: 14px;
			color: #016fb6;
			padding: 10rpx 0 20rpx 0rpx;
			/* #ifndef APP-PLUS */
			box-sizing: border-box;
			/* #endif */
		}

		.u-page {
			width: 90%;
			margin: auto;
			background-color: white;
			margin-top: 20px;
			border-radius: 5px;
		}
	</style>